<template>
  <div class="infobox3">
    <div class="block1">分割占位</div>
    <div class="block2_main">
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">基本信息</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">类型</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.type">
                <el-radio :label="1">空白</el-radio>
                <el-radio :label="2">分割线</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type == 2">
          <div class="tip1">线样式</div>
          <div class="tip2" style="width: calc(100% - 60px)">
            <div class="input">
              <el-radio-group v-model="data.borderStyle">
                <el-radio :label="1">实线</el-radio>
                <el-radio :label="2">虚线</el-radio>
                <el-radio :label="3">点线</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type == 2">
          <div class="tip1">线颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker
                v-model="data.style.borderColor"
              ></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">背景颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.style.borderBg"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">空白间距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.borderP"
                :max="100"
                :min="1"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">组件样式</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">上内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>

        <div class="info2 flex aitems">
          <div class="tip1">上外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uploads } from "@/api/upload";
export default {
  components: {},
  props: ["data"],
  data() {
    return {};
  },
  mounted() {
    console.log(this.data);
  },
  methods: {
    uploadImg(str) {
      let key = str.split(".");
      let img = this.$refs.uploadfile.files[0];
      let form = new FormData();
      form.append("file", img, img.name);
      uploads(form).then((res) => {
        let link = res.data.data.link;
        this[key[0]][key[1]][key[2]][key[3]] = link;
        document.getElementById("fileclass").value = null;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  .infobox3 {
    width: 340px;
    min-width: 340px;
    height: 100%;
    background: #f8f9fa;
    overflow-y: hidden;
    padding: 0 0px 10px;
    .block1 {
      font-size: 14px;
      font-weight: 600;
      color: #595961;
      padding: 9px 16px 9px 12px;
    }
    .block2_main {
      padding: 0 0 10px 0;
      height: calc(100% - 30px);
      overflow-y: scroll;
      .block2 {
        padding: 0 0 0 10px;
        .info1 {
          padding: 9px 16px 9px 12px;
          font-weight: 600;
          background: #eef0f4;
          border-radius: 5px;
          font-size: 12px;
          font-weight: 600;
          color: #595961;
          .tip1 {
          }
        }
        .info2 {
          padding: 10px;
          .tip1 {
            font-size: 12px;
            color: #595961;
            margin: 0 10px 0 0;
            width: 80px;
          }
          .tip2 {
            width: calc(100% - 80px - 10px);
            .uploadbox {
              cursor: pointer;
              width: 120px;
              height: 120px;
              background: #fff;
              transition: all 0.3s;
              border-radius: 4px;
              position: relative;
              overflow: hidden;
              .plusicon {
              }
              .uploadimg {
                width: 100%;
                height: 100%;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
            .uploadbox:hover {
              box-shadow: 0 0 10px 0 #ccc;
            }
          }
          .input {
          }
        }
      }
    }
  }
}
.fileclass {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  z-index: 99;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
